<template>
    <div>
        <Dialog ref="dialog" :title="dialog_title"  @close="dialog_ref?.close()" @submit="submit_fn" @cancel="cancel_fn">
            <ul>
                <li v-for="index in 10" :key="index" @click="select_index=index">
                    <span>{{ index }}</span>
                </li>
            </ul>
        </Dialog>
    </div>
</template>

<script setup lang="ts">
import Dialog from './Dialog.vue';
import { ref, useTemplateRef, onMounted } from 'vue';
import { MessageBox } from '../../utils/MessageBox';

const props = defineProps<{
    onSelect: (icon: string) => void
}>();


const dialog_ref = useTemplateRef<InstanceType<typeof Dialog>>('dialog');
const dialog_title = ref("提示");
let select_index = ref(0);

// 定义 submit_fn 函数
const submit_fn = () => {
    // 假设这里有一个选中的图标，这里用 'selected-icon' 作为示例
    // const selectedIcon = 'selected-icon';
    props.onSelect(select_index.value.toString());
    dialog_ref.value?.close();
};

// 定义 cancel_fn 函数
const cancel_fn = () => {
    dialog_ref.value?.close();
};
function open() {
    console.log("dialog open");
    dialog_ref.value?.open()
}
function close() {
    console.log("dialog close");
    dialog_ref.value?.close()
}
defineExpose({
    open,
    close
})
</script>

<style scoped>

</style>